<template>
  <div>
    <Form
      :select-show="false"
      :add-click-show="false"
      :picker-show="true"
      :page-index="pageIndex"
      oneitem="订单编号:"
      treeitem="选择日期:"
      :total-count="totalCount"
      :total-page="totalPage"
      :search-list="orderList"
      @changeList="changeList"
      @searchResultFn="searchResultFn"
    >
      <template #tableForm>
        <el-table-column label="序号" width="80" type="index" :index="indexMethod" />
        <el-table-column prop="orderNo" label="订单编号" />
        <el-table-column prop="skuName" label="商品名称" />
        <el-table-column prop="price" label="订单金额（元）" />
        <el-table-column prop="innerCode" label="设备编号" />
        <el-table-column prop="status" label="订单状态" />
        <el-table-column prop="createTime" label="订单日期" width="160" />
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="infoFn(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </template>
    </Form>
    <el-dialog v-if="info" title="订单详情" :visible.sync="dialogTableVisible" width="630px">
      <div class="title">
        状态:{{ title }}
      </div>
      <el-form :model="info" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单编号：">{{ info.orderNo }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单金额：">{{ info.price }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品名称：">{{ info.skuName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编号：">{{ info.innerCode }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间：">{{ info.createTime }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间：">{{ info.updateTime }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付方式：">{{ info.payTpe }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备地址：">{{ info.addr }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Form from '@/components/form/index.vue'
import { orderSearch } from '@/api'
export default {
  components: { Form },
  data() {
    return {
      orderList: [],
      pageIndex: 1,
      totalCount: null,
      totalPage: null,
      dialogTableVisible: false,
      info: null,
      inpForm: null
    }
  },
  created() {
    this.orderApi(this.pageIndex)
  },
  methods: {
    indexMethod(index) {
      return this.pageIndex === 1 ? index + 1 : Number(`${this.pageIndex - 1}${index}`) + 1
    },
    changeList(page) {
      this.pageIndex = page
      if (this.inpForm) {
        this.orderApi(page, this.inpForm.taskCode, ...this.inpForm.statusTime)
      } else {
        this.orderApi(page)
      }
    },
    async orderApi(pageIndex, orderNo, startDate, endDate) {
      const res = await orderSearch({
        pageIndex,
        orderNo,
        startDate,
        endDate,
        pageSize: 10
      })
      res.data.currentPageRecords.forEach(item => {
        item.price = (item.price / 100).toFixed(2)
        item.createTime = item.createTime.replace(/-/g, '.').replace('T', ' ')
        item.updateTime = item.updateTime.replace(/-/g, '.').replace('T', ' ')
        item.addr = item.addr.split('-').at(-1)
        if (item.status === 0) {
          item.status = '未支付'
        } else if (item.status === 1) {
          item.status = '支付完成'
        } else if (item.status === 2) {
          item.status = '出货成功'
        } else if (item.status === 3) {
          item.status = '出货失败 '
        }
        if (item.payTpe === '1') {
          item.payTpe = '支付宝'
        } else {
          item.payTpe = '微信'
        }
      })
      this.orderList = res.data.currentPageRecords
      this.totalCount = res.data.totalCount
      this.totalPage = res.data.totalPage
    },
    infoFn(row) {
      this.info = row
      this.dialogTableVisible = true
      if (row.status === '未支付') {
        this.title = '未支付'
      } else if (row.status === '支付完成') {
        this.title = '支付完成'
      } else if (row.status === '出货成功') {
        this.title = '出货成功'
      } else if (row.status === '出货失败 ') {
        this.title = '出货失败 '
      }
    },
    searchResultFn(val) {
      this.inpForm = val
      this.pageIndex = 1
      this.orderApi(1, val.taskCode, ...val.statusTime)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin: 0;
}

.title {
  height: 54px;
  margin-bottom: 25px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
}
</style>
